<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="shopAddStatus"
        width="70%"
        :show-close="false"
        :close-on-click-modal="false"
    >
<!--      修改+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
      <div class="update" v-if="doType=='update'">
        <div class="header">
          <el-table
              :data="spuList"
              style="width: 100%">
            <el-table-column
                prop="id"
                header-align="center"
                align="center"
                label="id">
            </el-table-column>
            <el-table-column
                prop="title"
                header-align="center"
                align="center"
                label="标题"
                :show-overflow-tooltip='text'>
            </el-table-column>
            <el-table-column
                prop="type"
                header-align="center"
                align="center"
                label="类型">
            </el-table-column>
            <el-table-column
                prop="brand"
                header-align="center"
                align="center"
                label="品牌">
            </el-table-column>
            <el-table-column
                prop="ramList"
                header-align="center"
                align="center"
                label="版本"
                :show-overflow-tooltip='text'>
            </el-table-column>
            <el-table-column
                prop="colorList"
                header-align="center"
                align="center"
                label="颜色"
                :show-overflow-tooltip='text'>
            </el-table-column>
            <el-table-column
                prop="price"
                header-align="center"
                align="center"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="wareTotal"
                header-align="center"
                align="center"
                label="库存总量">
            </el-table-column>
            <el-table-column
                prop="status"
                header-align="center"
                align="center"
                label="状态">
              　<template slot-scope="scope">
              <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
              <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
              <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">待审核</el-tag>
              　</template>
            </el-table-column>
            <el-table-column
                prop="paramMap"
                header-align="center"
                align="center"
                label="详细参数"
                :show-overflow-tooltip='text'>
            </el-table-column>
            <el-table-column
                prop="image"
                header-align="center"
                align="center"
                label="图片">
              <template slot-scope="scope">
                　　　<img :src="scope.row.image" width="40" height="40"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-divider></el-divider>
        <div class="updateContent">
            <div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div class="updateLeft">
                      <div>
                        <el-input placeholder="请输入内容" v-model="form.title">
                          <template slot="prepend">标题</template>
                        </el-input>
                      </div>
                      <div>
                        <el-input placeholder="请输入内容" v-model="form.type">
                          <template slot="prepend">类型</template>
                        </el-input>
                      </div>
                      <div>
                        <el-input placeholder="请输入内容" v-model="form.brand">
                          <template slot="prepend">品牌</template>
                        </el-input>
                      </div>
                      <div>
                        <el-input placeholder="单位：元" v-model.number="form.price">
                          <template slot="prepend">价格</template>
                        </el-input>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div>
                      <input type="file" @change="updateImg($event)" >
                      <span v-if="uploaldImage!=null"><img :src="uploaldImage" class="uploadImg"></span>
                    </div>
                    <el-divider></el-divider>
                    <h4>详细参数暂不支持修改</h4>
                    <div>
                      <div v-if="doType == 'update'">
                        <ul v-for="item in showParam">
                          <li v-for="(value,key) in item" :key="key" class="param">
                            <span v-if="key!=''">{{key}}：</span>
                            <span v-if="key!=''">
                              {{value}}
                            </span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
        </div>
      </div>
<!--      添加  ====================================================================================================================-->
      <div v-if="doType=='add'">
        <div class="addInput">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="form.type"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input v-model="form.brand"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <input type="file" @change="updateImg($event)">
              <span v-if="uploaldImage!=null">
                <img :src="uploaldImage" width="100px" height="100px">
              </span>
            </el-form-item>
            <el-form-item label="参数">
              <span style="float: left;cursor:pointer;color: #e57676" @click="appParam">添加详细参数</span>
              <span v-if="paramText!=null">{{paramText}}</span>
            </el-form-item>
<!--            基本属性设计，sku表单插入-->
            <p style="color:#ff0000;">该部分为改造后的部分，区别于服装服饰商品上架功能，除去了多sku组上传，该改造一次只能添加一组sku</p>
            <p style="line-height: 15px">补充sku组添加功能</p>
            <el-divider></el-divider>
            <div class="addAttr">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
<!--                    尺寸，或者版本-->
                    <p>尺寸或版本</p>
                    <el-input class="attrInput" placeholder="尺寸或版本" v-model="form.size"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <p>颜色或图案</p>
                  <div class="grid-content bg-purple">
                    <el-input class="attrInput" placeholder="颜色或图案" v-model="form.color"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <p>数量</p>
                  <div class="grid-content bg-purple">
                    <el-input class="attrInput" placeholder="数量" v-model="form.num"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="colse">取 消</el-button>
    <el-button type="primary" @click="update" v-if="doType=='update'">修 改</el-button>
         <el-button type="primary" @click="add" v-if="doType=='add'">添 加</el-button>
    </span>
    </el-dialog>
    <shop-add-param @consoleParam="consoleParam" :status="paramStatus" @add="appParamMap"></shop-add-param>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

import myUploald from "../../utils/myUploald";
import ElementUI from "_element-ui@2.15.6@element-ui";
import store from '@/store/index'
import shopAddParam from './shop-add-param'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  myUploald,
  shopAddParam
},
props: {
  shopAddStatus:false,
  spuList:[],
  doType:null, //操作类型
  showParam:[]

},
data() {
//这里存放数据
return {
  text:true,
  paramStatus: false,
  form:{
    id:null,
    title:null,
    type:null,
    brand:null,
    ramList:null,
    sizeList:null,
    colorList:null,
    price:null,
    wareTotal:null,
    status:null,
    paramMap: null,
    image:null,
    paramListShow:[],
    devColorSizeNum: null,
    size:null,
    color:null,
    num:null
  },
  paramText: null,


};
},
//计算属性 类似于data概念
computed: {
  uploaldImage(){
    return store.state.common.uploaldFile
  },
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  update(){
    this.$emit("update",this.form,store.state.common.uploaldFile,this.spuList[0].id)
    // this.form = null
  },
  //上传 图片
  updateImg(imgInfo){
    if(imgInfo.target.files[0].type=="image/jpeg"|imgInfo.target.files[0].type=="image/png"){
      myUploald.uploald(imgInfo.target.files[0])
    }else {
      ElementUI.Message({
        message: "请选择图片(jpeg,png)，暂不支持其他格式",
        type: "error"
      })
    }
  },

  colse(){
    this.$emit("colse")
    store.commit("uploaldFile",null)
    // this.form =null

  },
  //添加
  add(){

    this.form.paramMap = this.paramText
    this.form.image = store.state.common.uploaldFile
    this.$emit("add",this.form)
  },
  test(){
    console.log("dasdas")
    console.log("数据",this.spuList[0].listMap)
  },
  appParam(){
    this.paramStatus = true
  },
  //确定添加详细参数
  appParamMap(param){
    this.paramText = param
    this.consoleParam()
  },
  consoleParam(){
    this.paramStatus = false
  }



},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.updateLeft{
  width: 45%;

}
.updateRight{
  width: 45%;

}
.updateLeft>div{
  width: 500px;
  margin-top: 7px;
}
.uploadImg{
  width: 100px;
  height: 100px;
}
.param{
  line-height: 20px;
  list-style: none;
}
.addInput{
  width: 70%;
  margin: 0 auto;
}
.attrInput{
  margin-top: 10px;
}





</style>
